<template>
  <div class="content" v-for="(item, index) in data.titel" :key="index">
    <div class="content-card">
      <div class="content-card-list">
        <div class="content-card-header m-flex m-flex-row m-aligns-center m-justify-center">
          <icon-font icon-class="afl-shujuhuizong animate__animated animate__rubberBand animate__infinite animate__slower"></icon-font>
          <span class="m-ml-10">JKJ{{
              props.lineCode == "JJGPDLine1" ? $t("wms.one") : (props.lineCode == "JJGPDLine2" ?$t("wms.two"):$t("wms.three")) }}{{ $t("wms.totalLineInput") }}</span>
          <el-tag class="m-ml-10">today</el-tag>
        </div>
        <p class="content-card-number" style="line-height: 40px">
          <span style="margin-right: 10px">{{ data.titel[0]?.materialCode ? data.titel[0].materialCode + ':' : '' }}</span>
          {{ data.list.jkjInPutQty || 0 }}<span style="font-size: 10px; margin-left: 2px">pcs</span>
        </p>
      </div>
      <img class="imgs" src="http://screen.bjdnlsj.com/afl-data-screen/images/icon-input.png"
      />
    </div>
    <div class="content-card">
      <div class="content-card-list">
        <div class="content-card-header m-flex m-flex-row m-aligns-center m-justify-center">
          <icon-font icon-class="afl-shujuhuizong animate__animated animate__rubberBand animate__infinite animate__slower"></icon-font>
          <span class="m-ml-10">PE{{ props.lineCode == "JJGPDLine1" ? $t("wms.one") : (props.lineCode == "JJGPDLine2" ?$t("wms.two"):$t("wms.three")) }}{{ $t("wms.totalLineInput") }}</span>
          <el-tag class="m-ml-10">today</el-tag>
        </div>
        <p class="content-card-number color2" style="line-height: 40px">
          <span style="margin-right: 10px">{{ data.titel[1]?.materialCode ? data.titel[1].materialCode + ':' : '' }}</span>{{ data.list?.peInPutQty || 0 }}<span style="font-size: 10px; margin-left: 2px">pcs</span>
        </p>
      </div>
      <img class="imgs" src="http://screen.bjdnlsj.com/afl-data-screen/images/icon-output.png"/>
    </div>
    <div class="content-card">
      <div class="content-card-list">
        <div class="content-card-header m-flex m-flex-row m-aligns-center m-justify-center" >
          <icon-font icon-class="afl-shujuhuizong animate__animated animate__rubberBand animate__infinite animate__slower"></icon-font>
          <span class="m-ml-10">DR
            {{ props.lineCode == "JJGPDLine1" ? $t("wms.one") : (props.lineCode == "JJGPDLine2" ?$t("wms.two"):$t("wms.three"))
            }}{{ $t("wms.totalLineInput") }}
          </span>
          <el-tag class="m-ml-10">today</el-tag>
        </div>
        <p class="content-card-number color3" style="line-height: 40px">
          <span style="margin-right: 10px" class="color3">{{ data.titel[2]?.materialCode ? data.titel[2].materialCode + ':' : '' }}</span>{{ data.list?.drInPutQty || 0}}<span class="color3" style="font-size: 10px; margin-left: 2px">pcs</span>
        </p>
      </div>
      <img class="imgs" src="http://screen.bjdnlsj.com/afl-data-screen/images/icon-all-input.png"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref, watch, defineProps } from "vue";
import iconFont from "@/components/IconFont/iconFont";
import { getJJGSingleTabulateData, getMaterialInputToJJG } from "@/api/mesApi";

const data = reactive({
  list: "",
  period: [],
  classes: "",
  titel: [],
});

const props = defineProps({
  classes: { type: String },
  period: { type: Array },
  lineCode: { type: String },
});
watch(
  () => [props.classes, props.period, props.lineCode],
  () => {
    data.classes = props.classes;
    data.period = props.period;
    if (data.period[0] !== undefined && data.period[0].length === undefined) {
      data.period[0] = data.period[0].toLocaleDateString();
      data.period[1] = data.period[1].toLocaleDateString();
    }
    getJJGSingleTabulate();
  }
);
onMounted(() => {
  getJJGSingleTabulate();
  getMaterialToJJG();
  setTime();
});
const getJJGSingleTabulate = () => {
  const a = props.lineCode;
  getJJGSingleTabulateData({
    mesProduceDate: data.period[0] || "",
    mesProduceDate1: data.period[1] || "",
    shiftCode: data.classes === "ALL" ? "ALL" : data.classes,
    productionLineCode: props.lineCode,
  }).then((res) => {
    data.list = res.data;
  });
};
// 定时执行
const setTime = () => {
  setInterval(async () => {
    await getJJGSingleTabulate();
  }, 6000);
};

const getMaterialToJJG = () => {
  getMaterialInputToJJG({}).then((res) => {
    if (res.code === 0) {
      data.titel = [...res.data];
    }
  });
};
</script>

<style scoped lang="scss">
.content {
  height: 100%;
  width: 100%;
  margin: 0 !important;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  flex-wrap: nowrap;
  box-sizing: border-box;

  &-card {
    height: 100%;
    width: 50%;
    box-sizing: border-box;
    margin: 0 10px 0 0;
    position: relative;
    border: 1px solid #e4e7ed;
    border-radius: 10px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
    background-color: #fff;
    display: flex;
    flex-direction: row;

    &-list {
      flex: 1;
    }

    &-header {
      height: 40%;
      width: 100%;
      font-size: 19px;
      line-height: 280%;
      text-align: center;
      color: #999999;
      font-weight: 600;

      .iconfont {
        font-size: 20px;
        color: #37886c;
        margin-right: 5px;
      }
    }

    &-number {
      height: 60%;
      width: 100%;
      font-size: 24px;
      font-weight: 600;
      line-height: 0;
      text-align: center;
      color: #0f0667;
    }
  }

  &-card:last-child {
    margin: 0;
  }
}

.color2 {
  color: #37886c;
}

.color3 {
  color: #76027d;
}

// 头部线条
// .content-card::after {
//     content: "";
//     width: 1px;
//     height: 50%;
//     position: absolute;
//     top: 50px;
//     left: 36px;
//     background: #989898;
// }
// .content-card::before {
//     content: "";
//     width: 3px;
//     height: 20%;
//     position: absolute;
//     top: 25px;
//     left: 35px;
//     background: #527AFF;
// }

.imgs {
  height: 100px;
  width: 100px;
  margin-right: 60px;
}
</style>
